<template>
  <div>
    <div v-if="isSwitch">
      <div class="elCard">
        <el-row>
          <el-col :span="20"
            ><div class="grid-content bg-purple">
              <el-form :v-model="selectOptions" :inline="true">
                <el-form-item prop="productId ">
                  <el-select v-model="selectOptions.productId" clearable filterable placeholder="请选择产品名称">
                    <el-option v-for="item in ProductList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="stageId ">
                  <el-select v-model="selectOptions.stageId" clearable filterable placeholder="请选择阶段类型">
                    <el-option v-for="item in stageList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="reset" @click="reset" v-has="'M1101001'">重置</el-button>
                  <el-button class="serach" @click="onSearch" v-has="'M1101002'">搜索</el-button>
                </el-form-item>
              </el-form>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-tooltip content="切换至列表" placement="top" effect="light">
                <span class="listImg" @click="isSwitchFalse"></span>
              </el-tooltip></div
          ></el-col>
        </el-row>
      </div>
      <div class="StageDisplay">
        <el-card>
          <div class="moudleDisplay">
            <ul class="DisplayTitle">
              <li v-for="(item, index) in GetOverViewAsyncList" :key="index">
                <div class="moudleDisplayItem">
                  {{ item.name+" ("+item.feedBackList.length+")" }}
                </div>
                <div class="moudleDisplayItem_" style="margin-right: 0px">
                  <div
                    class="aboutFeedCard"
                    v-for="(list, index2) in item.feedBackList"
                    :key="index2"
                    @click="openDeatailScreen(list.id, list.stageId)"
                  >
                    <div class="cardID">
                      <div class="cardID_content">
                        <!-- <el-tooltip
                                                    class="item"
                                                    effect="light"
                                                    content="超期标识"
                                                    placement="top-start"
                                                >
                                                    <span
                                                        class="cardImg"
                                                    ></span>
                                                </el-tooltip>
                                                {{ list.beyondMarkType }} -->
                        <RadioStatusBtn :isClass="true" :type="list.beyondMarkType"> </RadioStatusBtn>
                      </div>
                      <div class="cardID_content">
                        <el-tooltip class="item" effect="light" content="反馈ID" placement="top-start">
                          <span class="cardImg"></span> </el-tooltip
                        >{{ list.feedBackNumber }}
                      </div>
                      <div class="cardID_content">
                        <el-tooltip class="item" effect="light" content="指派人" placement="top-start">
                          <span class="idImg"></span>
                        </el-tooltip>
                        {{ list.userName }}
                      </div>
                    </div>
                    <div class="cardName cardTitle">
                      <div class="cardID_content">
                        <span>产品名称：</span>
                        <el-tooltip :content="list.productName" placement="top" effect="light">
                          <span class="aboutTitles">{{ list.productName }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="cardName cardTitle">
                      <div class="cardID_content">
                        <span>标题：</span>
                        <el-tooltip :content="list.title" placement="top" effect="light">
                          <span class="aboutTitless">{{ list.title }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </div>
    <div v-else>
      <div class="elCard">
        <el-row>
          <el-col :span="20"
            ><div class="grid-content bg-purple">
              <el-form :model="SelectConditionForm" ref="SelectConditionForm" :inline="true">
                <el-form-item prop="productId">
                  <el-select v-model="SelectConditionForm.productId" placeholder="请选择所属产品" filterable clearable>
                    <el-option value="" label="全部产品"></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="stageId">
                  <el-select v-model="SelectConditionForm.stageId" placeholder="请选择所处阶段" filterable clearable>
                    <el-option value="" label="全部阶段"></el-option>
                    <el-option v-for="(item, index) in childStageList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="reset" @click="resets" v-has="'M1101001'">重置</el-button>
                  <el-button class="serach" @click="onSearchsKuang" v-has="'M1101002'">搜索</el-button>
                </el-form-item>
              </el-form>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-tooltip content="切换到看板" placement="top" effect="light">
                <span class="kanban" @click="isSwitchTrue"></span>
              </el-tooltip></div
          ></el-col>
        </el-row>
      </div>
      <div class="StageDisplays">
        <div class="moudleDisplay">
          <el-table
            height="590"
            :data="feedBackList"
            style="width: 100%"
            ref="tableDataRef"
            class="feedBackDataTable"
            :cell-style="{ textAlign: 'center', height: '60px' }"
            :header-cell-style="{
              textAlign: 'center',
              height: '50px',
              backgroundColor: '#FFFFFF'
            }"
          >
            <el-table-column prop="stage" label="阶段名称">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.c1StatusId == '1423154128074436609' &&
                      (scope.row.c2Status == 0 || scope.row.c2Status == 2 || scope.row.c2Status == 3)
                  "
                  >长期跟踪中</span
                >
                <span v-else-if="scope.row.c1StatusId == '1423154128074436609' && scope.row.c2Status == 1">已完成</span>
                <span v-else>{{ scope.row.stage }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="beyondMarkType" label="超期标识" sortable>
              <template slot-scope="scope">
                <RadioStatusBtn :isClass="true" :type="scope.row.beyondMarkType"> </RadioStatusBtn>
              </template>
            </el-table-column>
            <el-table-column prop="feedBackNumber" label="反馈ID" sortable>
              <template slot-scope="scope">
                <span @click="openDeatailScreen(scope.row.id, scope.row.stageId)" class="toPageLink">{{
                  scope.row.feedBackNumber
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="200">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.productName" placement="top" effect="light">
                  <span class="aboutTitle">{{ scope.row.productName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.title" placement="top" effect="light">
                  <span class="aboutTitle">{{ scope.row.title }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="assignedUser" label="指派人">
              <template slot-scope="scope">
                <span v-if="scope.row.feedBackStatus == 2">Closed</span>
                <span v-else>
                  {{ scope.row.assignedUser }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationClock">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryinfo.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="queryinfo.pageRow"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalNumber"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { OverView } from '@/api/overView/service'
import { FeedBack } from '@/api/feedBack/server'
import RadioStatusBtn from '@/components/radioStatusBtn/radioStatusBtn.vue'
import FilterTrans from '@/utils/paramsFiler'
export default {
    name: '',
    components: {
        RadioStatusBtn
    },
    props: {},
    data() {
        const EFilterOprator = FilterTrans.EFilterOprator
        return {
            isSwitch: true,
            SelectConditionForm: {
                serverRequestTag: null,
                c2Status: null,
                marketProjectStatusId: null, // 营销项目名称
                marketProjectNameId: null, // 营销项目状态名称
                problemTypeParentId: null, // 问题类型
                feedBackSourceId: null, // 反馈来源
                ctag: null,
                // c1StatusId: '1423154128074436609', // 默认C1已关闭
                c1StatusId: null, // 默认C1已关闭
                productId: null,
                InfluenceCategoryId: null,
                stageId: null,
                assignedUserId: null,
                creatorId: null,
                feedback_number: null,
                dateTime: [],
                versionNumber: null,
                startTime: null,
                endTime: null
            },
            searchCondition: [
                {
                    field: 'versionNumber',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'serverRequestTag',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'ctag',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'c1StatusId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'c2Status',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'productId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'InfluenceCategoryId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'stageId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'assignedUserId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'creatorId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'feedback_number',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'marketProjectStatusId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'marketProjectNameId',
                    operator: EFilterOprator.Equal
                },
                {
                    field: 'feedBackSourceId',
                    operator: EFilterOprator.Equal
                }
            ],
            selectOptions: {
                productId: '',
                stageId: ''
            },
            queryinfo: {
                pageIndex: 1,
                pageRow: 50
            },
            childStageList: [],
            // 超期标识
            StageOverdueTagEnum: [
                {
                    value: false,
                    title: '未超期'
                },
                {
                    value: true,
                    title: '超期'
                }
            ],
            totalNumber: null,
            feedBackList: [],
            stageList: [],
            ProductList: [],
            GetOverViewAsyncList: [],
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            operationStatus: [
                {
                    label: '待确认',
                    value: 'ToBeConfirmed'
                },
                {
                    label: '已确认',
                    value: 'Acknowledged'
                },
                {
                    label: '已完成',
                    value: 'OffTheStocks'
                }
            ]
        }
    },
    computed: {},
    watch: {},
    filters: {
    /**
     * @description:文字过滤器
     * @param {String} _val 传入的值
     * @param {Array} _list 定义的转换数组
     */
        transferSeverity(_val, _list) {
            let str = ''
            _list.findIndex(_item => {
                if (_item.value === _val) {
                    str = _item.title
                    return true
                } else {
                    return false
                }
            })
            return str
        },
        /**
     * @description:时间过滤器
     * @param {Date} _val
     * @return {String} str 转换格式后的字符串
     */
        dateTime(_val) {
            let str = ''
            str = this.dayjs(_val).format('YYYY-MM-DD HH:mm:ss')
            return str
        },
        /**
     * @description:字符串长度过滤器
     * @param {String} _val
     * @return {String} 字符串切割后的字符串
     */
        formatData(_val) {
            if (_val) {
                return _val.substring(0, 10)
            }
            return ''
        },
        formatTimer: function(value) {
            if (value) {
                const date = new Date(value)
                const y = date.getFullYear()
                let MM = date.getMonth() + 1
                MM = MM < 10 ? '0' + MM : MM
                let d = date.getDate()
                d = d < 10 ? '0' + d : d
                let h = date.getHours()
                h = h < 10 ? '0' + h : h
                let m = date.getMinutes()
                m = m < 10 ? '0' + m : m
                let s = date.getSeconds()
                s = s < 10 ? '0' + s : s
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
            } else {
                return value
            }
        }
    },
    created() {},
    mounted() {
        this.dateTimeInitialise()
        this.onSearch()
        this.onSearchs()
        this.getProductList()
        this.getStageList()
        this.getChildStageList()
        if (localStorage.getItem('isSwitch') === null) {
            localStorage.setItem('isSwitch', true)
        } else {
            if (localStorage.getItem('isSwitch') === 'true') {
                this.isSwitch = true
            } else {
                this.isSwitch = false
            }
        }
    },
    methods: {
        isSwitchTrue() {
            this.isSwitch = !this.isSwitch
            localStorage.setItem('isSwitch', this.isSwitch)
        },
        isSwitchFalse() {
            this.isSwitch = !this.isSwitch
            localStorage.setItem('isSwitch', this.isSwitch)
        },
        /**
     * @description: 筛选时间初始化
     */
        dateTimeInitialise() {
            const currentYear = new Date().getFullYear()
            const currentMounth = new Date().getMonth()
            const firstDay = new Date(currentYear, currentMounth, 1)
            const lastDay = new Date(currentYear, currentMounth + 1, 0)
            this.SelectConditionForm.dateTime.push(firstDay)
            this.SelectConditionForm.dateTime.push(lastDay)
            // 条件初始化
            // this.SelectConditionForm.c1StatusId = '1423154128074436609'
        },
        async getChildStageList() {
            try {
                const result = await FeedBack.GetListChildrenAsync({ type: 'NAME' })
                if (result.success) {
                    for (var i = 0; i < result.data.length; i++) {
                        const item = result.data[i]
                        if (item.id != '1423154128091213825') {
                            this.childStageList.push(item)
                        }
                    }
                }
            } catch (err) {
                console.log(err)
            }
        },
        handleSizeChange(_val) {
            this.queryinfo.pageRow = _val
            this.onSearchs()
        },
        handleCurrentChange(_val) {
            this.queryinfo.pageIndex = _val
            this.onSearchs()
        },
        onSearchsKuang() {
            this.dateTimeInitialise()
            this.filter = FilterTrans.buildPageRequest(this.SelectConditionForm, this.searchCondition)
            this.getFeedBackListKuang()
        },
        onSearchs() {
            this.dateTimeInitialise()
            this.filter = FilterTrans.buildPageRequest(this.SelectConditionForm, this.searchCondition)
            this.getFeedBackList()
        },
        /**
     * @description: 重置页面筛选条件
     */
        resets() {
            this.dateTimeInitialise()
            this.queryinfo.pageIndex = 1
            this.$refs['SelectConditionForm'].resetFields()
            this.onSearchs()
        },
        /**
     * @description: 获取反馈列表数据getFeedBackListKuang
     */
        async getFeedBackList() {
            this.feedBackList = []
            try {
                const data = this.handleForm(this.filter)
                const result = await FeedBack.GetPageAsync(data)
                if (result.success) {
                    const arr = result.data.data
                    const arrList = []
                    for (const item of arr) {
                        if (item.feedBackNumber != null) {
                            arrList.push(item)
                        }
                    }
                    this.feedBackList = arrList
                    this.totalNumber = result.data.total
                }
            } catch (err) {
                console.log(err)
            }
        },
        /**
     * @description: 获取反馈列表数据
     */
        async getFeedBackListKuang() {
            this.feedBackList = []
            try {
                const data = this.handleFormKuang(this.filter)
                const result = await FeedBack.GetPageAsync(data)
                if (result.success) {
                    const arr = result.data.data
                    const arrList = []
                    for (const item of arr) {
                        if (item.feedBackNumber != null) {
                            arrList.push(item)
                        }
                    }
                    this.feedBackList = arrList
                    this.totalNumber = result.data.total
                }
            } catch (err) {
                console.log(err)
            }
        },
        handleFormKuang(_filter) {
            this.queryinfo.pageIndex = 1
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'createTime'
                }
            ]
            // filters.push({
            //     field: 'c1StatusId',
            //     operator: 0,
            //     value: '1423154128074436609'
            // })
            // filters.push({
            //     field: 'if(isnull(c2_status),4,c2_status)',
            //     operator: 1,
            //     value: 1
            // })
            if (this.SelectConditionForm.problemTypeParentId == 'smallProblem') {
                filters.push({
                    field: 'problemTypeId',
                    operator: 1,
                    value: null
                })
            } else if (this.SelectConditionForm.problemTypeParentId == 'bigProblem') {
                filters.push({
                    field: 'problemTypeParentId',
                    operator: 1,
                    value: null
                })
            }

            filter.pageIndex = this.queryinfo.pageIndex
            filter.pageRow = this.queryinfo.pageRow
            const time = this.SelectConditionForm.dateTime

            if (time.length) {
                const startTime = this.getTime(time[0])
                const endtTime = this.getTime(time[1])
                filters.push({
                    field: 'createTime',
                    operator: 2,
                    value: startTime
                })
                filters.push({
                    field: 'createTime',
                    operator: 4,
                    value: endtTime
                })
            }

            return filter
        },

        /**
     * @description:构建filter实例对象
     * @param {Object} _filter
     * @return {Object} 构建后的filter对象
     */
        handleForm(_filter) {
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'createTime'
                }
            ]
            // filters.push({
            //     field: 'c1StatusId',
            //     operator: 0,
            //     value: '1423154128074436609'
            // })
            // filters.push({
            //     field: 'if(isnull(c2_status),4,c2_status)',
            //     operator: 1,
            //     value: 1
            // })
            if (this.SelectConditionForm.problemTypeParentId == 'smallProblem') {
                filters.push({
                    field: 'problemTypeId',
                    operator: 1,
                    value: null
                })
            } else if (this.SelectConditionForm.problemTypeParentId == 'bigProblem') {
                filters.push({
                    field: 'problemTypeParentId',
                    operator: 1,
                    value: null
                })
            }

            filter.pageIndex = this.queryinfo.pageIndex
            filter.pageRow = this.queryinfo.pageRow
            const time = this.SelectConditionForm.dateTime

            if (time.length) {
                const startTime = this.getTime(time[0])
                const endtTime = this.getTime(time[1])
                filters.push({
                    field: 'createTime',
                    operator: 2,
                    value: startTime
                })
                filters.push({
                    field: 'createTime',
                    operator: 4,
                    value: endtTime
                })
            }

            return filter
        },
        /**
     * @description:时间处理函数
     * @param {*} data 时间
     * @return {*}
     */
        getTime(data) {
            const value =
        data.getFullYear() +
        '-' +
        this.checkTime(data.getMonth() + 1) +
        '-' +
        this.checkTime(data.getDate()) +
        ' ' +
        this.checkTime(data.getHours()) +
        ':' +
        this.checkTime(data.getMinutes()) +
        ':' +
        this.checkTime(data.getSeconds())
            return value
        },
        /**
     * @description:显示转换
     * @param {Nummber} i
     * @return {Number} 转换后的数字
     */
        checkTime(i) {
            if (i < 10) {
                i = '0' + i
            }
            return i
        },
        onSearch() {
            if (this.selectOptions.productId === '') {
                this.selectOptions.productId = null
            }
            if (this.selectOptions.stageId === '') {
                this.selectOptions.stageId = null
            }
            this.getCory(this.selectOptions)
        },
        reset() {
            this.selectOptions.productId = null
            this.selectOptions.stageId = null
            this.getCory(this.selectOptions)
        },
        // 获取所有阶段列表
        async getCory() {
            try {
                const result = await OverView.FeedBackGetOverViewAsync(this.selectOptions)
                if (result.success) {
                    this.GetOverViewAsyncList = []
                    for (var i = 0; i < result.data.length; i++) {
                        const item = result.data[i]
                        if (item.id != '1423154128091213825') {
                            this.GetOverViewAsyncList.push(item)
                        }
                    }
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await OverView.ProInsertAsync()
                if (result.success) {
                    this.ProductList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 获取所有阶段列表
        async getStageList() {
            try {
                const result = await OverView.GetListChildrenAsync({ type: 'STATUS' })
                if (result.success) {
                    this.stageList = []
                    for (var i = 0; i < result.data.length; i++) {
                        const item = result.data[i]
                        if (item.id != '1423154128074436609') {
                            this.stageList.push(item)
                        }
                    }
                }
            } catch (err) {
                console.log(err)
            }
        },
        toClick(two) {
            this.$router.push({
                path: 'DetailsFeedBack?id=' + two
            })
        },

        // 主页看板查看详情
        openDeatailScreen(id, stageId) {
            // this.$router.push({ path: 'Details?id=' + id })
            this.$router.push({
                path: 'Details?id=' + id + '&buttonStatus=' + null + '&stageId=' + stageId + '&formType=3'
            })
        }
    }
}
</script>
<style scoped lang="less" src="@/assets/style/feedBackDialog.less"></style>
<style scoped lang="less">
.buttonStyle {
  width: 80px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
  z-index: 999;
  float: right;
  margin-top: 20px;
}
.listImg {
  margin-top: 20px;
//   display: inline-block;
  width: 30px;
  height: 30px;
  background: url('../../../assets/image/list.png') no-repeat;
  background-size: contain;
float: right;
}
.kanban {
  margin-top: 20px;
//   display: inline-block;
  width: 30px;
  height: 30px;
  background: url('../../../assets/image/kanban.png') no-repeat;
  background-size: contain;
float: right;
}
.elCard {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 30px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  .el-form {
    margin-top: 20px;

    .reset {
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      width: 60px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #dcdde0;
      border-radius: 5px;
      &:hover {
        background: #3579e0;
        color: #ffffff;
      }
    }
    .serach {
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: #666666;

      width: 60px;
      height: 30px;
      background: #ffffff;

      border: 1px solid #dcdde0;
      border-radius: 5px;

      &:hover {
        background: #3579e0;
        color: #ffffff;
      }
    }
  }
  ::v-deep .el-input__inner {
    width: 150px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #f0f2f7;
    border-radius: 5px;
  }
}
.StageDisplays {
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 30px;
}
.StageDisplay {
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 30px;
  height: 734px;
}
.el-card {
  margin: 0;
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  display: flex;
  box-sizing: border-box;
  background: #edf3fb;
  overflow-x: auto;
  border-radius: 5px;

  /*滚动条样式*/
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background: #b2b8c0;
    border-radius: 5px;
    cursor: pointer;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0;
    background: transparent;
  }
}

.moudleDisplay {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  border-radius: 5px;
}
.moudleDisplay ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.paginationClock {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
}

/*滚动条样式*/
.moudleDisplayItem_::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  height: 32px;
}
.moudleDisplayItem_::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: #ccc;
  border-radius: 3px;
}
.moudleDisplayItem_::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  background: transparent;
}

.moudleDisplayItem {
  width: 207px;
  height: 40px;
  background: #ffffff;
  border-radius: 2px;
  margin-right: 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 3px -15px #ccc;
}

.moudleDisplayItem_ {
  width: 207px;
  border: 2px solid #f4f5f8;
  border-top: none;
  height: 639px;
  box-sizing: border-box;
  border-radius: 0px 0px 5px 5px;
  border-right: none;
  margin-right: 15px;
  min-height: 639px;
  overflow: auto;
  // overflow-x: hidden;
  .aboutFeedCard {
    width: 205px;
    // height: 150px;
    background: #ffffff;
    border-radius: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 12px;
    cursor: pointer;
    &:hover {
      background-color: #fff;
      box-shadow: 0px 0px 10px 5px rgba(152, 160, 179, 0.2);
    }
    &:first-child {
      margin-top: 10px;
    }
    .cardID {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.cardStatus {
        margin-top: 8px;
        margin-bottom: 0px;
        .createDays {
          background: #e2fff4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 400;
          color: #22e99d;
          text-align: center;
          padding: 2px 5px;
        }
      }
      .cardID_contId {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      .cardID_theme {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url('../../../assets/image/icon/personCard.png') no-repeat;
        background-size: contain;
        margin-right: 9px;
      }
      .cardID_content {
        display: flex;
        font-size: 12px;
        align-items: center;
        font-weight: 400;
        color: #999999;
        .cardImg {
          display: inline-block;
          margin-top: 2px;
          width: 22px;
          height: 22px;
          background: url('../../../assets/image/overViewId.png') no-repeat;
          background-size: contain;
        }
        .idImg {
          display: inline-block;
          margin-top: 2px;
          width: 22px;
          height: 22px;
          background: url('../../../assets/image/icon/personCard.png') no-repeat;
          background-size: contain;
        }
        .productName {
          display: inline-block;
          font-size: 12px;
          font-weight: 400;
          color: #666666;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 140px;
        }
      }
      margin-bottom: 10px;
    }
    .cardName {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      .cardID_theme {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: black;
      }
      .cardID_content {
        display: flex;
        // display: inline-block;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      &.cardTitle {
        // border: 1px dotted #eee;
        padding: 5px;
      }
    }
  }
}
.moudleDisplay_title {
  height: 50px;
  display: flex;
  font-size: 20px;
  font-weight: 600;
}
.DisplayContent {
  height: 845px;
}
.DisplayTitle {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.DisplayContent .moudleDisplayItem_ :last-child {
  margin-right: none;
}

.el-card.is-always-shadow {
  box-shadow: none;
}
.aboutTitles {
  width: 110px;
  cursor: pointer;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
::v-deep .el-pagination {
  .el-input__inner {
    width: 100px;
    margin: 0 5px;
  }
}
.aboutTitless {
  width: 134px;
  cursor: pointer;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.aboutTitle {
  width: 170px;
  cursor: pointer;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

::v-deep .el-tabs__item {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
}

.btn-text {
  background: #edf4ff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #3579e0;
  text-align: center;
  padding: 2px 5px;
}
.toPageLink {
  color: #3579e0;
  text-decoration: underline;
  &:hover {
    color: #3579e0;
    cursor: pointer;
  }
}
</style>
